<template>
	<div class="w-full relative" style="height: 100%">
		<gaodeMap
			apiKey="b1113278a29b0474c5b9105840afa8e9"
			:plugins="['AMap.ToolBar', 'AMap.Scale', 'AMap.MarkerCluster', 'AMap.MouseTool', 'AMap.PlaceSearch']"
			:zoom="14"
			viewMode="2D"
			ref="gaodeMapRef"
		></gaodeMap>
		<div class="absolute bottom-10 left-0 box" v-drag draggable>
			<a-tooltip>
				<template #title
					>开启鼠标画多边形模式。鼠标在地图上单击开始绘制多边形，鼠标左键双击或右键单击结束当前多边形的绘制 </template
				><a-button type="primary" @click.stop="gaodeMapRef.gaodeMapDrag()">开始绘制</a-button>
			</a-tooltip>

			<a-button type="primary" @click="gaodeMapRef.ringArea()">计算当前面积</a-button>
			<a-button type="primary" status="warning" @click.stop="gaodeMapRef.mouseToolClose()">结束绘制</a-button>
			<a-button type="primary" danger @click.stop="gaodeMapRef.closeEdit()">取消选中</a-button>
			<a-button type="primary" danger @click.stop="gaodeMapRef.remmovePolygon()">清除当前</a-button>

			<a-button type="primary" danger @click.stop="gaodeMapRef.remmovePolygon(true)">清除所有</a-button>
			<a-button type="primary" status="success" @click.stop="gaodeMapRef.exportFile()">导出当前</a-button>
		</div>
	</div>
</template>
<script setup>
	import gaodeMap from '@/components/Map/gaodeMap/index.vue'

	const gaodeMapRef = ref()
</script>
<style scoped lang="less">
	.box {
		width: 150px;
		border-radius: 20px;
		padding: 15px;
		display: flex;
		gap: 15px;
		flex-direction: column;
	}
</style>
